<template>
    <div>
        <div style="text-align:center;margin:30px 0"><Icon type="compose" size="100"></Icon><span class="biaoti">用户注册</span></div>
        <Form ref="formInline" :model="formInline" :rules="ruleInline" inline style="text-align:center">
            <FormItem prop="头像" style="width:250px">
                <div class="demo-avatar">
                    <Avatar shape="square" icon="person" size="large" :src="formInline.picurl"/>
                </div>
            </FormItem></br>
            <FormItem prop="upload" style="width:250px">
                <upload
                    class="v1"
                    accept="image/png,image/jpeg"
                    disable-preview
                    placeholder="点击我上传头像"
                    image-class="v1-image"
                    input-class="v1-input"
                    :max-size="customImageMaxSize"
                    @size-exceeded="onSizeExceeded"
                    @file="onFile"
                    @load="onLoad" >
                </upload>
            </FormItem></br>
            <FormItem prop="name" style="width:250px">
                <Input type="text" @on-blur="checkUser" v-model="formInline.name" placeholder="Username">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
            </FormItem></br>
            <FormItem prop="password" style="width:250px">
                <Input type="password" v-model="formInline.password" placeholder="Password">
                    <Icon type="ios-locked-outline" slot="prepend"></Icon>
                </Input>
            </FormItem></br>
            <FormItem >
                <Button type="primary" @click="register('formInline')" style="width:250px">注册</Button>
            </FormItem></br>
            <FormItem >
                <Button type="info" @click="toHome" style="width:250px">已有账号，去登录</Button>
            </FormItem>
        </Form>
        <div class="footer" style="text-align:center">
            made by 周凯迪
        </div>
    </div>
</template>

<script>
import VueBase64FileUpload from 'vue-base64-file-upload';
export default {
    components: {
        upload:VueBase64FileUpload
    },
    data(){
        return{
            allowRegister:false,
            info:'',
            customImageMaxSize: 10,
            formInline: {
                picurl:'',
                name: '',
                password:''
            },
            ruleInline: {
                name: [
                    { required: true, message: '请填写用户名', trigger: 'blur' },
                    { required: true,min: 2, message: '用户名长度不能小于2位', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请填写密码', trigger: 'blur' },
                    { required: true,min: 3, message: '密码长度不能小于3位', trigger: 'blur' }
                ]
            }
        }
        
    },
    created(){
        this.allowRegister=false;
        this.formInline.name="";
        this.formInline.password="";
        this.formInline.picurl=""
    },
    methods:{
        checkUser(){

                if (this.formInline.name!=='' && this.formInline.name.length>1){
                    this.$http({
                        url:'http://localhost:3000/users/check',
                        method:'post',
                        data:this.formInline
                    }).then(res=>{
                        console.log(res)
                        if(res.data){
                            this.allowRegister=false;
                            this.$Message.error('该用户名已存在，请更换用户名');
                        }else{
                            this.allowRegister=true;
                            this.$Message.success('恭喜，该用户名可以使用');
                        }
                    })
                }else{
                    this.$Message.error('用户名不能为空,且长度不小于2位');
                }
           
        },
        register(name) {
                if (this.formInline.name.length>1 && this.formInline.password.length>2 ) {//判断用户名是都有重复
                    if(this.formInline.picurl!==''){//判断有无头像
                        if(this.allowRegister){
                            this.$http({
                                url:'http://localhost:3000/users/data',
                                method:'post',
                                data:this.formInline
                            }).then(res=>{
                                if(res.data){
                                    this.$Message.success('注册成功!');
                                    var timer = setTimeout(() => {
                                        this.$router.push('/')
                                        this.$emit('changeReg','true')
                                    }, 3000);
                                }else{
                                    this.$Message.error('服务器错误，code：500');
                                }
                            })
                        }else{
                            this.$Message.error('用户名已存在，请更换用户名');
                        }
                    }else{
                        this.$Message.error('请上传一张图片作为头像');
                    }
                } else{
                    this.$Message.error('基本信息未按要求填写!');
                }
        },
        onFile(file) {
            console.log(file); // file object
        },

        onLoad(dataUrl) {
            this.formInline.picurl=dataUrl;
            console.log('dataUrl is ready!'); // data-uri string
        },

        onSizeExceeded(size) {
            alert(`Image ${size}Mb size exceeds limits of ${this.customImageMaxSize}Mb!`);
        },
        toHome(){
            this.$emit('changeReg','true')
        }
    }
}
</script>

<style>
    .biaoti{
        font-family: "Hiragino Sans GB";
        font-size:50px;
    }
    
    .ivu-avatar-image{
        width:120px;
        height:120px;
    }
</style>
